<template>
  <div class="info">
    <!-- 公共导航栏 -->
    <hmttnav title="个人信息" path="/my"></hmttnav>
    <div class="content">
      <!-- 头像 -->
      <van-cell title="头像" is-link class="icon" @click="show = true">
        <template #default>
          <img class="iconImage" :src="userInfo.photo" alt="" />
        </template>
      </van-cell>
      <!-- 昵称 -->
      <van-cell
        title="昵称"
        :value="userInfo.name"
        is-link
        @click="nickNameShow = true"
      />
      <!-- 介绍 -->
      <van-cell
        title="介绍"
        @click="jieshaoShow = true"
        :value="intor"
        is-link
      />
      <!-- 性别 -->
      <van-cell
        title="性别"
        @click="genderShow = true"
        :value="columns[userInfo.gender]"
        is-link
      />
      <!-- 生日 -->
      <van-cell
        title="生日"
        :value="userInfo.birthday"
        @click="shengriShow = true"
        is-link
      />
    </div>

    <!-- 点击头像弹出框 -->
    <van-popup v-model="show" class="uploadBox">
      <van-uploader
        :after-read="afterRead"
        style="display: none"
        ref="uploadFile"
      />
      <!-- <form action="" display="none">
        <input type="file" name="" id="" />
      </form> -->
      <div class="one" @click="eidtIcon">
        从相册中选择
      </div>
      <div class="two">拍照</div>
      <div>取消</div>
    </van-popup>
    <!-- 点击昵称弹出框 -->
    <van-popup
      v-model="nickNameShow"
      position="bottom"
      :style="{ height: '10%' }"
    >
      <van-field v-model="nickNameValue"> </van-field>
    </van-popup>
    <!-- 点击介绍弹框 -->
    <van-popup
      v-model="jieshaoShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="jieshaoBox">
        <textarea name="" id="" ref="text"></textarea>
        <div class="btnBox">
          <van-button class="btn" type="default">取消</van-button>
          <van-button class="btn" type="primary" @click="btnIntro"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
    <!-- 点击性别弹框 -->
    <van-popup v-model="genderShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 点击生日弹框 -->
    <van-popup v-model="shengriShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="shengriConfirm"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 图片预览遮罩层 -->
    <van-overlay :show="zhezhaoShow" @click="clickZhezhao">
      <div class="wrapper" @click="clickZhezhao">
        <div class="block">
          <img :src="picUrl" alt="" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { editUserApi, userIconApi } from '../../Api/userinfo'
// import instance from '../utils/request'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      // 一进入页面获取用户信息
      userList: {},
      show: false,
      // 控制昵称弹框
      nickNameShow: false,
      jieshaoShow: false,
      genderShow: false,
      shengriShow: false,
      // 昵称内容
      nickNameValue: '',
      columns: ['男', '女'],
      date: '',
      minDate: new Date(1960, 0, 1),
      maxDate: new Date(2025, 10, 1),
      // 日期默认选中
      currentDate: '',
      gender: '',
      zhezhaoShow: false,
      // 头像上传需要的file数据
      formphoto: '',
      fileList: '',
      // 图片预览路径
      picUrl: ''
    }
  },
  methods: {
    ...mapMutations(['getUserInfo']),
    ...mapActions(['getUserInfo', 'getIntro']),
    // 性别点击确定事件
    async onConfirm (value, index) {
      await editUserApi({
        gender: index
      })
      this.userInfo.gender = index
      console.log(index)
      // this.$store.dispatch('getUserInfo')
      this.genderShow = false
    },
    // 性别取消事件
    onCancel () {
      this.genderShow = false
    },
    // 点击头像
    eidtIcon () {
      this.$refs.uploadFile.chooseFile()
      // document.querySelector('.picInput').onchange = function () {
      //   const pic = this.files[0]
      //   const url = URL.createObjectURL(pic)
      //   document.querySelector('.iconImage').setAttribute('src', url)
      //   // Vue.show = false
      // }
    },
    // 上传图片前
    beforeRead (file) {
      var isImageType =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      var limit2M = file.size / 1024 / 1024 < 2
      if (!limit2M) {
        this.$toast.fail('对不起，图片大小不能超过 2M')
      }
      if (!isImageType) {
        this.$toast.fail('对不起，图片只能为 jpg/png/gif')
      }
      return limit2M && isImageType
    },
    // 文件上传后
    afterRead (file) {
      // 关闭
      this.show = false
      // 开启图片预览遮罩层
      this.zhezhaoShow = true
      // 给图片遮罩层的img设置路径
      this.formphoto = file.file
      this.picUrl = URL.createObjectURL(file.file)
    },
    // 点击图片预览遮罩
    clickZhezhao () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否将此图片设置为头像'
        })
        .then(async () => {
          var fd = new FormData()
          fd.append('photo', this.formphoto)
          await userIconApi(fd)
          this.$store.dispatch('getUserInfo')
          this.$toast.success('操作成功')
          this.zhezhaoShow = false
        })
        .catch(() => {
          this.zhezhaoShow = false
        })
    },
    // 点击介绍的确定按钮
    async btnIntro () {
      await editUserApi({
        intro: this.$refs.text.value
      })
      this.$store.dispatch('getIntro')
      // this.userInfo.intro = res.data.data.intro
      this.$toast.success('修改成功')
      this.$refs.text.value = ''
      this.jieshaoShow = false
    },
    // 点击生日确认按钮
    async shengriConfirm (value) {
      const time = dayjs(value).format('YYYY-MM-DD')
      await editUserApi({
        birthday: time
      })
      this.$store.dispatch('getUserInfo')
      this.$toast.success('修改成功')
      this.shengriShow = false
    }
  },
  computed: {
    ...mapState(['userInfo', 'intor'])
  },
  watch: {
    // 昵称监听
    async nickNameShow () {
      if (this.nickNameValue.trim() === '') {
      } else {
        await editUserApi({
          name: this.nickNameValue.trim()
        })
        this.nickNameValue = ''
        this.$toast.success('修改成功')
        this.$store.dispatch('getUserInfo')
        // this.userInfo.name = res.data.data.name
      }
    }
  },
  created () {
    // this.$login()
    this.currentDate = new Date(this.userInfo.birthday.split('-').join(','))
  }
}
</script>

<style lang="less" scoped>
.info {
  .nav {
  }
  .content {
    .icon {
      img {
        height: 25px;
        width: 25px;
        background-color: yellow;
        border-radius: 50%;
      }
    }
  }
  .uploadBox {
    width: 300px;
    text-align: center;
    font-size: 16px;
    line-height: 3em;
    border-radius: 8px;
    .one,
    .two {
      border-bottom: 1px solid #d9d9d9;
    }
  }
  .jieshaoBox {
    padding: 15px;
    textarea {
      width: 100%;
      height: 120px;
      border: 1px solid #ccc;
    }
    .btnBox {
      margin-top: 20px;
      display: flex;
      .btn {
        flex: 1;
        padding: 15px;
        width: 120px;
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    padding: 10px;
  }

  .block {
    width: 100%;
    height: 300px;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
